<template>
	<view>
		<view class="order-name">
			<input :min="6" :max="30" v-model="userName" class="input" placeholder="收货人姓名"></input>
			<input :min="6" :max="30" v-model="telNumber" class="input" placeholder="联系电话"></input>
			<!-- <input :min="6" :max="30" v-model="postalCode" class="input" placeholder="邮政编码"></input>
			<input :min="6" :max="30" v-model="nationalCode" class="input" placeholder="收货地址国家码"></input> -->
			<input class="input" v-model='pickerText' @click="showCityPicker" placeholder="请选择收件地区" />
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onCancel="onCancel" @onConfirm="onConfirm" @getVal='getVal'></mpvue-city-picker>
			<textarea :min="6" :max="50" v-model="detailInfo" class="input" style="width: 94%;" placeholder="详细收货地址"></textarea>
			<view class="input" style="display: flex;justify-content: space-between;line-height: 60upx;">
				<view>设为默认地址</view>
				<switch color="#13CE66" :checked="isDefault" @change='handleChange' />
			</view>
		</view>
		<button type="primary" class="login-btn" @click="submit()">保存</button>
	</view>
</template>

<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				id: '',
				userName: '',
				telNumber: '',
				postalCode: '',
				nationalCode: '',
				pickerText: '',
				detailInfo: '',
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				provinceName: '',
				cityName: '',
				countyName: '',
				isDefault: false
			};
		},
		onLoad(e) {
			this.id = e.id
			this.isDefault = e.isDefault === '1' ? true : false
			this.userName = e.name,
				this.telNumber = e.telNumber,
				this.pickerText = e.provinceName + e.cityName + e.countyName,
				this.detailInfo = e.detailInfo,
				this.provinceName = e.provinceName,
				this.cityName = e.cityName,
				this.countyName = e.countyName
		},
		methods: {
			onCancel(e) {},
			onConfirm(e) {
				this.pickerText = e.label
			},
			getVal(e) {
				this.provinceName = e.province,
					this.cityName = e.cityName,
					this.countyName = e.countyName
			},
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			handleChange() {
				this.isDefault = !this.isDefault
				let params = {
					userId: this.userId,
					addressId: this.id
				}
				post('mobileapi/mobile/member/usercenter/setDefaultAddress',params).then(res => {
					uni.showToast({
						title: '设置成功',
						icon: 'success'
					})
				})
			},
			submit() {
				const params = {
					id: this.id,
					userId: this.userId,
					userName: this.userName,
					telNumber: this.telNumber,
					postalCode: this.postalCode,
					nationalCode: this.nationalCode,
					provinceName: this.provinceName,
					cityName: this.cityName,
					countyName: this.countyName,
					detailInfo: this.detailInfo,
					isDefault: this.isDefault ? 1 : 0
				}
				post('mobileapi/mobile/member/usercenter/updateAddress', params).then(res => {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					uni.navigateBack(-1)
				})
			},
		}
	}
</script>

<style>
	.order-name {
		margin: 20upx 20upx;
		font-size: 28upx;
	}
	.login-btn{
		background: #D7000F;
		margin-top: 60upx;
		font-size: 30upx;
	}
</style>
